import React, { useState } from 'react'
import axios from 'axios'
import Pubsub from 'pubsub-js'

export default function Header() {
  //点击button获取表单的值,受控表单
const [search,setSearch] = useState('')
const changeSearchHandle = (e)=>{
  setSearch(e.target.value)
}
const searchHandle = async()=>{
  //点击button发送axios请求
  //axios是异步的,返回一个结果
  const result = await axios.get('https://api.github.com/search/users?q='+search)
  //result.data.items是一个数组,把这个数组传给List
  // console.log(result);
  //发布订阅
  Pubsub.publish('github',result)
}


  return (
    <section className="jumbotron">
    <h3 className="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" value={search} onChange={changeSearchHandle} placeholder="enter the name you search"/>
      &nbsp;
      <button onClick={searchHandle}>Search</button>
    </div>
  </section>
  )
}
